﻿/*
         * 名称：图片轮播
         * 说明：带有navi和前后按钮的轮播插件，支持手指拖动。
         */

//因为app的从某个链接进入首页，页面会缩小，所以去掉了给ul li img设置宽度
; (function ($) {
    'use strict';
    $.fn.focusImg = function (option) {
        var box = $(this);

        var options = $.extend({}, $.fn.focusImg.defaults, box.data(), typeof option == 'object' && option);

        var carouselClass = '.carousel-inner-wrap',     // 轮播_图容器
            carouselItemClass = '.carousel-inner-wrap-cell',   // 轮播_每个图

            ul = $(carouselClass, box),
            navbox = $('.carousel-dot', box),
            lis = $(carouselItemClass, ul),

            winWidth = lis.width(),
            imgNumber = lis.length,
            link = $('img', ul),                       // 取出轮播图原格式（未前后追加各1的版本）
            isCached = false,                          // 是否link缓存过，用于广告被延迟填充内容的处理
            imgs = 'img[title]',                       // 排除掉不带title的广告图片

    // ### 下面是轮播动作相关变量
            isMoving = false,
            startX = 0,
            startY = 0,
            endX = 0,
            endY = 0,
            distanceX = 0,                             // 横坐标差
            distanceY = 0,                             // 纵坐标差
            boundary = 30,                             // 边界值，没有超过边界即回弹
            isMoved = false,                           // 是否移动了，用于touchend图片就位
            timer = null,                              // 定时器
    //        obj = null,

    // ### 下面是导航部分相关变量
            current = 1,                               // 控制动画的索引，最低0
            navBarIdx = 1,                             // 导航点索引，会出现负数
            nextBtnClass = '.carousel-arrow.next',             // 下一个按钮样式
            prevBtnClass = '.carousel-arrow.prev',             // 上一个按钮样式
            navBarActiveClass = 'selected',      // 导航点激活样式
            titleBox = 'h2';

        // 轮播图事件绑定
        ul.on('touchstart', tStart)
          .on('touchmove', tMove)
          .on('touchend', tEnd);

        $(nextBtnClass, box).on("click", function () {
            aniTo(++current);
            updateNavbarActive(++navBarIdx);
        });
        $(prevBtnClass, box).on("click", function () {
            aniTo(--current);
            updateNavbarActive(--navBarIdx);
        });

        // touchstart 回调
        function tStart(e) {

            if (!isMoving) {
                //        e.preventDefault();
                startX = getPos(e).posX;
                startY = getPos(e).posY;
                isMoved = false;
                //clearInterval(timer);
            }
        }

        // touchmove 回调
        function tMove(e) {
            if (!isMoving) {
                endX = getPos(e).posX;
                endY = getPos(e).posY;
                distanceX = endX - startX;
                distanceY = endY - startY;

                // 如果纵坐标差 > 横坐标差大于5：判断为纵向滚动
                if ((Math.abs(distanceY) - Math.abs(distanceX)) < 5) {
                    e.preventDefault();
                    isMoved = true;
                    moveTo(distanceX + (current * -winWidth));
                }
            }
        }

        // touchend 回调
        function tEnd(e) {

            if (isMoved && !isMoving) {
                endX = getPos(e).posX;
                //      startY = getPos(e).posY;
                distanceX = endX - startX;

                // 是否回弹
                if (Math.abs(distanceX) < boundary) {
                    aniTo(current);
                } else {
                    if (endX - startX < 0) {
                        aniTo(++current);
                        updateNavbarActive(++navBarIdx);
                    } else {
                        aniTo(--current);
                        updateNavbarActive(--navBarIdx);
                    }
                }
                autoPlay();
            }

        }

        // 移动ing
        function moveTo(distance) {
            ul.css('-webkit-transform', 'translate3d(' + distance + 'px,0,0)');
        }

        // 动画效果
        function aniTo(idx) {
            var x = winWidth * -idx;
            isMoving = true;
            ul.animate({
                'translate3d': x + 'px,0,0'
            }, options.speed, 'swing', aniToCallback);
        }

        // 动画后的回调，前后追加元素用于循环
        function aniToCallback() {
            var idx;

            // 左右顶头才会执行下面的if和elseif
            // 只在轮播中循环的话，不执行下面
            if (current === 2) {         // 到最后了，要append一个li到最后面
                idx = navBarIdx % imgNumber - 1;

                lis.eq(idx).clone().appendTo(ul);
                ul.children().first().remove();
                moveTo(--current * -winWidth);
            } else if (current === 0) {              // 到第一个，要prepend一个li到最前面
                idx = navBarIdx % imgNumber - 2;
                if (navBarIdx < 0) {
                    idx += imgNumber;
                }   // 小于0需要加上长度
                lis.eq(idx).clone().prependTo(ul);
                ul.children().last().remove();
                moveTo(++current * -winWidth);
            }
            //      loadImg(current+1);
            //      loadImg(current-1);
            isMoving = false;
        }

        // 返回当前事件的坐标
        function getPos(e) {
            return {
                posX: e.changedTouches[0].clientX,
                posY: e.changedTouches[0].clientY
            };
        }

        // 自动循环播放
        function autoPlay() {
            if (options.autoPlay === true) {
                clearInterval(timer);
                timer = setInterval(function () {
                    aniTo(++current);
                    updateNavbarActive(++navBarIdx);
                }, options.interval);
            }
        }

        // 更新导航点
        function updateNavbarActive(idx) {
            if (idx >= 0) {
                idx = idx % imgNumber;
                if (idx === 0) {
                    idx = imgNumber;
                }
            } else {
                idx = idx % imgNumber + imgNumber;
            }

            // 导航条当前高亮
            navbox.find('span').eq(idx - 1).addClass(navBarActiveClass)
              .siblings().removeClass(navBarActiveClass);

            //// 导航数字计算 activate/imgNumber
            //var navnum = '<span>' + idx + '/' + imgNumber + '</span>';

            //// 为了防止广告后加载覆盖了a[title]，要重新将变量填充
            //if (event && !isCached) {
            //    link = $(imgs, ul).slice(1, imgNumber + 1);
            //    loadImg();
            //    isCached = true;
            //}
            //var title = link.eq(idx - 1).attr('title');

            //$(titleBox, box).html(title + navnum);
        }

        // 图片加载函数
        function loadImg(idx) {
            //if (typeof idx === "number") {
            //    var img = $(carouselItemClass, ul).eq(idx).find(imgs)[0];

            //    if (img && !img.src) {
            //        img.src = img.dataset.srcs;
            //        //          $img.attr('src', $img.data('srcs')).removeAttr('data-srcs');
            //    }

            //} else {
            //    $(carouselItemClass, ul).find(imgs).each(function (idx, item) {
            //        if (!item.src) {
            //            item.src = item.dataset.srcs;
            //        }
            //    });
            //}
        }

        // resize
        function resize() {
            winWidth = $(carouselItemClass, box).width();
            //winWidth = $(carouselClass, box).parent().width();
            //alert(winWidth);
            // 设容器宽度等于屏幕宽
            //ul.css('width', winWidth * (imgNumber + 2));

            // 重置图片宽度
            //$(carouselItemClass, ul).css('width', winWidth);
            //$('img', ul).css('width', winWidth);
            // 定位到当前图片坐标
            moveTo(current * -winWidth);

            //解决图片加载不出来撑高页面的问题
            // ul.css("max-height", winWidth * options.imgRate);
        }

        // 初始化
        function init() {

            // 重置轮播的内容，为了循环，同时给<li>绑定index属性，标示当前第几个
            lis.first().clone().appendTo(ul);
            lis.last().clone().prependTo(ul);
            //
            // //// 加载第一张图
            // //loadImg(1);
            //
            // // 更新lis对象为前后填充过的新的lis，长度等于长度+2
            // //      lis = $(carouselItemClass, ul);
            //
            // // 导航创建，填充navi
            // //for (var i = 0, htm = ''; i < imgNumber; i++) {
            // //    htm += '<i></i>';
            // //}
            // //$(htm).appendTo($('.dot', box));
            //
            // // 填充标题和导航样式
            // updateNavbarActive(1);

            // 页面ready后加载第零张和第二张图
            //$(document).on('ready', function () {
            //    loadImg(0);
            //    loadImg(2);
            //});

            $(window).on('resize', resize);
            resize();

            autoPlay();
        }

        init();
    };
    $.fn.focusImg.defaults = {
        autoPlay: true,
        speed: 350,
        interval: 5000, imgRate: 151 / 320
    }


})(Zepto);